<template>
  <div class="post-stats-container">
    <div class="stats-grid">
      <div class="stat-item">
        <EyeOutlined class="stat-icon" />
        <div class="stat-info">
          <div class="stat-value">{{ stats.viewCount || 0 }}</div>
          <div class="stat-label">浏览量</div>
        </div>
      </div>
      
      <div class="stat-item">
        <LikeOutlined 
          class="stat-icon"
          :class="{ liked: isLiked }"
          @click="handleLikeClick"
        />
        <div class="stat-info">
          <div class="stat-value">{{ stats.likeCount || 0 }}</div>
          <div class="stat-label">点赞</div>
        </div>
      </div>
      
      <div class="stat-item">
        <MessageOutlined class="stat-icon" />
        <div class="stat-info">
          <div class="stat-value">{{ stats.commentCount || 0 }}</div>
          <div class="stat-label">评论</div>
        </div>
      </div>
      
      <div class="stat-item">
        <ShareAltOutlined class="stat-icon" />
        <div class="stat-info">
          <div class="stat-value">{{ stats.shareCount || 0 }}</div>
          <div class="stat-label">分享</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { message, Modal } from 'ant-design-vue'
import { 
  EyeOutlined, 
  LikeOutlined, 
  MessageOutlined, 
  ShareAltOutlined 
} from '@ant-design/icons-vue'
import { postApi, likeApi } from '@/api'
import { useUserStore } from '@/stores'
import type { PostStats } from '@/types'

const props = defineProps<{
  postId: number
}>()

const router = useRouter()
const userStore = useUserStore()
const stats = ref<PostStats>({
  id: props.postId,
  title: '',
  viewCount: 0,
  likeCount: 0,
  commentCount: 0,
  favoriteCount: 0,
  shareCount: 0
})

const isLiked = ref(false)

// 处理点赞点击事件
const handleLikeClick = () => {
  if (!userStore.isLoggedIn) {
    // 用户未登录，显示登录提示
    Modal.confirm({
      title: '需要登录',
      content: '登录后才能点赞，是否前往登录？',
      okText: '去登录',
      cancelText: '取消',
      onOk() {
        // 使用Vue Router跳转到登录页面
        router.push('/login')
      }
    })
    return
  }
  
  // 用户已登录，执行点赞操作
  toggleLike()
}

// 切换点赞状态
const toggleLike = async () => {
  try {
    const response = await likeApi.toggleLike({
      targetType: 'POST',
      targetId: props.postId
    })
    
    console.log('点赞操作响应:', response)
    
    // 重新加载统计数据以确保准确性
    await loadStats()
    
    // 切换本地点赞状态
    isLiked.value = !isLiked.value
    
    // 根据响应消息显示合适的提示
    if (response.message.includes('取消')) {
      message.success('取消点赞成功')
    } else {
      message.success('点赞成功')
    }
  } catch (error) {
    console.error('点赞操作失败:', error)
    message.error('操作失败')
  }
}

// 加载统计数据
const loadStats = async () => {
  try {
    const response = await postApi.getPostStats(props.postId)
    console.log('文章统计数据响应:', response)
    stats.value = response.data
    
    // 检查是否已点赞
    const likeStatus = await likeApi.getLikeStatus({
      targetType: 'POST',
      targetId: props.postId
    })
    console.log('文章点赞状态响应:', likeStatus)
    isLiked.value = likeStatus.data || false
  } catch (error) {
    console.error('加载统计数据失败:', error)
    message.error('加载统计数据失败')
  }
}

onMounted(() => {
  loadStats()
})
</script>

<style scoped>
.post-stats-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 24px;
  margin-bottom: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 24px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  font-size: 24px;
  color: #8c8c8c;
  cursor: pointer;
  transition: all 0.3s;
}

.stat-icon:hover {
  color: #1890ff;
}

.stat-icon.liked {
  color: #ff4d4f;
}

.stat-info {
  text-align: center;
}

.stat-value {
  font-size: 20px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #8c8c8c;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .stat-item {
    gap: 12px;
  }
  
  .stat-icon {
    font-size: 20px;
  }
  
  .stat-value {
    font-size: 18px;
  }
}
</style>